<template>
  <form class="form-inline" @submit.prevent >
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">任务</div>
      </div>
      <input
        type="text"
        class="form-control"
        placeholder="请输入任务信息"
        style="width:300px"
        v-model.trim="task"
        @keyup.esc="task=''"
      />
    </div>

    <button type="submit" class="btn btn-primary mb-2" @click="addTask" >添加新任务</button>
  </form>
</template>

<script>
export default {
  name: 'TodoInput',
  emits:['add'],
  data(){
    return {
        task:''
    }
  },
  methods:{
    // 提交事件处理函数
    addTask(){
        if(!this.task) return alert('任务名称不能为空!')
        this.$emit('add',this.task)
        this.task=''
    }
  }
}
</script>

<style lang="less" scoped >
</style>